<template>
    <div>
        <div class="top">
            <div class="top-left">
                <svg class="icon" aria-hidden="true" @click="$router.back(-1)">
                    <use xlink:href="#icon-zuojiantou-"></use>
                </svg>
                <span class="hint">歌单</span>
            </div>
            <div class="top-right">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-sousuo"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-gengduo-shuxiang"></use>
                </svg>
            </div>
        </div>
        <div class="center">
            <img :src="img" alt="">
            <div class="content">
                <div class="name">{{name}}</div>
                <div class="avatar">
                    <img :src="avatarUrl" alt="">
                    <span>{{avatar}}</span>
                </div>
                <div class="des">"{{description}}</div>
            </div>
        </div>
        <div class="music_list">
            <div class="music_top" @click="playMusic(0)">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-bofang1"></use>
                </svg>
                <span>播放全部</span>
            </div>
            <div class="music" v-for="(item,index) in listView" :key="index" @click="playMusic(index)">
                <div class="index">{{index+1}}</div>
                <div class="music_tracks">
                    <div class="music_name">{{item.name}}</div>
                    <div class="music_avatar">{{item.ar[0].name}}-{{item.al.name}}</div>
                </div>
                <div class="music_more">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gengduo-shuxiang"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
    .top{
        padding: .4rem .2rem;
        display: flex;
        justify-content: space-between;
        .icon{
            width: 1rem;
            transform: translateY(.05rem);
        }
    }
    .center{
        padding: .4rem;
        display: flex;
        img{
            width: 30%;
            height: 30%;
        }
        .content{
            flex: 1;
            padding-left: .3rem;
            margin: auto 0;
            height: 30%;
            .name,.des{
                overflow: hidden; 
                text-overflow: ellipsis;
                display: -webkit-box; 
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
            .name{
                font-weight: bold;
            }
            .avatar{
                line-height: .6rem;
                img{
                    height: .3rem;
                    width: .3rem;
                    border-radius: 50%;
                    margin: 0 .1rem;
                    transform: translateY(0.06rem);
                }
                span{
                    font-size: .24rem;
                }
            }
            .des{
                color: rgb(94, 94, 94);
                font-size: .2rem;
            }
        }
    }
    .music_list{
        padding: .2rem;
        .music_top{
            margin-bottom: .2rem;
            .icon{
                margin: 0 .2rem;
                width: .36rem;
                transform: translateY(0.06rem);
            }
        }
    }
    .music{
        height: 1.2rem;
        display: flex;
        .index{
            line-height: 1.2rem;
            text-align: center;
            width: 1rem;
            color: rgb(116, 116, 116);
        }
        .music_tracks{
            flex: 1;
            margin: auto 0;
            .music_name,.music_avatar{
                overflow: hidden; 
                text-overflow: ellipsis;
                display: -webkit-box; 
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
            }
            .music_name{
                // font-weight: bold;
                line-height: .5rem;
            }
            .music_avatar{
                font-size: .2rem;
                color: rgb(99, 99, 99);
            }
        }
        .music_more{
            width: .5rem;
            align-self: center;
        }
    }
</style>

<script>
import {getListView} from '@/api/api'
export default {
    data () {
        return {
            listView:[],
            img:'',
            name:'',
            description:'',
            avatar:'',
            avatarUrl:''
        }
    },
    async mounted() {
        let res = await getListView(this.$route.params.id);
        this.listView = res.data.playlist.tracks;
        console.log(this.$route.params.id);
        this.img = res.data.playlist.coverImgUrl;
        this.name = res.data.playlist.name;
        this.description = res.data.playlist.description;
        this.avatar = res.data.playlist.creator.description;
        this.avatarUrl = res.data.playlist.creator.avatarUrl;
    },
    methods:{
        playMusic(index){
            this.$store.commit('setPlayList', this.listView);
            this.$store.commit('setIndex', index);
        }
    }
}
</script>